Methods and Systems for Viewing Embedded Content

ABSTRACT

A method is performed by an electronic device. The method displays a first portion of a content item, consisting of (i) embedded content with opposing first and second sides, displayed at a first resolution, and (ii) a first text portion displayed adjacent to the first side. The method detects selection of the embedded content. In response to the selection, the method displays the embedded content at a second resolution greater than the first resolution. While displaying the embedded content at the second resolution, the method detects a swipe gesture in a first direction. In response to the swipe gesture, the method displays a second portion of the content item consisting of (i) the embedded content, displayed at the first resolution, and (ii) a second text portion, which is not included in the first portion of the content item, displayed adjacent to the second side of the embedded content.

RELATED APPLICATION

This application is a continuation of U.S. application Ser. No.14/704,472, filed May 5, 2015, which is incorporated by reference hereinin its entirety.

TECHNICAL FIELD

This relates generally to viewing embedded content in an item ofcontent, including but not limited to using gestures to view embeddedcontent.

BACKGROUND

The Internet has become an increasingly dominant platform for thepublication of electronic content, for both the media and the generalpopulation. Electronic content takes on many forms, some with which aconsumer can interact, such as embedded pictures or videos a consumermay view and manipulate. The embedded pictures or videos are embedded,for example, in digital items of content.

As the use of mobile devices for digesting electronic content becomesmore prevalent, consumers often struggle to view and interact withembedded electronic content in an efficient and effective manner.

SUMMARY

Accordingly, there is a need for methods, systems, and interfaces forviewing embedded content in a simple and efficient manner. By utilizinggestures to view various portions of embedded content at variousresolutions, users can efficiently and easily digest electronic content.Such methods and interfaces optionally complement or replaceconventional methods for viewing embedded content.

In accordance with some embodiments, a method is performed at anelectronic device (e.g., a client device) with one or more processorsand memory storing instructions for execution by the one or moreprocessors. The method includes simultaneously displaying, within anitem of content, an embedded content item and a first portion of theitem of content distinct from the embedded content item in a displayarea having a display height and a display width. The embedded contentitem is displayed at a first resolution at which the entire width of theembedded content item is contained within the display width of thedisplay area. A first user input is detected, indicating selection ofthe embedded content item. In response to the first user input, displayof the first portion of the item of content ceases, and a first portionof the embedded content item is displayed at a second resolution that isgreater than the first resolution, wherein a height of the first portionof the embedded content item at the second resolution equals the displayheight.

In accordance with some embodiments, an electronic device (e.g., aclient device) includes one or more processors, memory, and one or moreprograms; the one or more programs are stored in the memory andconfigured to be executed by the one or more processors. The one or moreprograms include instructions for performing the operations of themethod described above. In accordance with some embodiments, anon-transitory computer-readable storage medium has stored thereininstructions that, when executed by the electronic device, cause theelectronic device to perform the operations of the method describedabove.

Thus, electronic devices are provided with more effective and efficientmethods for viewing embedded content, thereby increasing theeffectiveness and efficiency of such devices and user satisfaction withsuch devices.

BRIEF DESCRIPTION OF THE DRAWINGS

For a better understanding of the various described embodiments,reference should be made to the Description of Embodiments below, inconjunction with the following drawings. Like reference numerals referto corresponding parts throughout the figures and description.

FIG. 1 is a block diagram illustrating an exemplary network architectureof a social network in accordance with some embodiments.

FIG. 2 is a block diagram illustrating an exemplary social-networksystem in accordance with some embodiments.

FIG. 3 is a block diagram illustrating an exemplary client device inaccordance with some embodiments.

FIGS. 4A-4G illustrate exemplary graphical user interfaces (GUIs) on aclient device for viewing embedded content, in accordance with someembodiments.

FIGS. 5A-5C are flow diagrams illustrating a method of viewing embeddedcontent, in accordance with some embodiments.

DESCRIPTION OF EMBODIMENTS

Reference will now be made to embodiments, examples of which areillustrated in the accompanying drawings. In the following description,numerous specific details are set forth in order to provide anunderstanding of the various described embodiments. However, it will beapparent to one of ordinary skill in the art that the various describedembodiments may be practiced without these specific details. In otherinstances, well-known methods, procedures, components, circuits, andnetworks have not been described in detail so as not to unnecessarilyobscure aspects of the embodiments.

It will also be understood that, although the terms first, second, etc.are, in some instances, used herein to describe various elements, theseelements should not be limited by these terms. These terms are used onlyto distinguish one element from another. For example, a first portion ofan item of content could be termed a second portion of the item ofcontent, and, similarly, a second portion of the item of content couldbe termed a first portion of the item of content, without departing fromthe scope of the various described embodiments. The first portion of theitem of content and the second portion of the item of content are bothportions of the item of content, but they are not the same portion.

The terminology used in the description of the various embodimentsdescribed herein is for the purpose of describing particular embodimentsonly and is not intended to be limiting. As used in the description ofthe various described embodiments and the appended claims, the singularforms “a,” “an,” and “the” are intended to include the plural forms aswell, unless the context clearly indicates otherwise. It will also beunderstood that the term “and/or” as used herein refers to andencompasses any and all possible combinations of one or more of theassociated listed items. It will be further understood that the terms“includes,” “including,” “comprises,” and/or “comprising,” when used inthis specification, specify the presence of stated features, integers,steps, operations, elements, and/or components, but do not preclude thepresence or addition of one or more other features, integers, steps,operations, elements, components, and/or groups thereof.

As used herein, the term “if” is, optionally, construed to mean “when”or “upon” or “in response to determining” or “in response to detecting”or “in accordance with a determination that,” depending on the context.Similarly, the phrase “if it is determined” or “if [a stated conditionor event] is detected” is, optionally, construed to mean “upondetermining” or “in response to determining” or “upon detecting [thestated condition or event]” or “in response to detecting [the statedcondition or event]” or “in accordance with a determination that [astated condition or event] is detected,” depending on the context.

As used herein, the term “exemplary” is used in the sense of “serving asan example, instance, or illustration” and not in the sense of“representing the best of its kind.”

FIG. 1 is a block diagram illustrating an exemplary network architecture100 of a social network in accordance with some embodiments. The networkarchitecture 100 includes a number of client devices (also called“client systems,” “client computers,” or “clients”) 104-1, 104-2, . . .104-n communicably connected to an electronic social-network system 108by one or more networks 106 (e.g., the Internet, cellular telephonenetworks, mobile data networks, other wide area networks, local areanetworks, metropolitan area networks, and so on). In some embodiments,the one or more networks 106 include a public communication network(e.g., the Internet and/or a cellular data network), a privatecommunications network (e.g., a private LAN or leased lines), or acombination of such communication networks.

In some embodiments, the client devices 104-1, 104-2, . . . 104-n arecomputing devices such as smart watches, personal digital assistants,portable media players, smart phones, tablet computers, 2D gamingdevices, 3D (e.g., virtual reality) gaming devices, laptop computers,desktop computers, televisions with one or more processors embeddedtherein or coupled thereto, in-vehicle information systems (e.g., anin-car computer system that provides navigation, entertainment, and/orother information), and/or other appropriate computing devices that canbe used to communicate with the social-network system 108. In someembodiments, the social-network system 108 is a single computing devicesuch as a computer server, while in other embodiments, thesocial-network system 108 is implemented by multiple computing devicesworking together to perform the actions of a server system (e.g., cloudcomputing).

Users 102-1, 102-2, . . . 102-n employ the client devices 104-1, 104-2,. . . 104-n to access the social-network system 108 and to participatein a corresponding social-networking service provided by thesocial-network system 108. For example, one or more of the clientdevices 104-1, 104-2, . . . 104-n execute web browser applications thatcan be used to access the social-networking service. As another example,one or more of the client devices 104-1, 104-2, . . . 104-n executesoftware applications that are specific to the social-networking service(e.g., social-networking “apps” running on smart phones or tablets, suchas a Facebook social-networking application running on an iPhone,Android, or Windows smart phone or tablet).

Users interacting with the client devices 104-1, 104-2, . . . 104-n canparticipate in the social-networking service provided by thesocial-network system 108 by posting information (e.g., items ofcontent), such as text comments (e.g., updates, announcements, replies),digital photos, videos, audio files, links, and/or other electroniccontent. Users of the social-networking service can also annotateinformation (e.g., items of content) posted by other users of thesocial-networking service (e.g., endorsing or “liking” a posting ofanother user, or commenting on a posting by another user). In someembodiments, information can be posted on a user's behalf by systemsand/or services external to the social-network system 108. For example,the user may post a review of a movie to a movie-review website, andwith proper permissions that website may cross-post the review to thesocial network system 108 on the user's behalf. In another example, asoftware application executing on a mobile client device, with properpermissions, may use global positioning system (GPS) or othergeo-location capabilities (e.g., Wi-Fi or hybrid positioning systems) todetermine the user's location and update the social network system 108with the user's location (e.g., “At Home”, “At Work”, or “In SanFrancisco, Calif.”), and/or update the social network system 108 withinformation derived from and/or based on the user's location. Usersinteracting with the client devices 104-1, 104-2, . . . 104-n can alsouse the social-networking service provided by the social-network system108 to define groups of users. Users interacting with the client devices104-1, 104-2, . . . 104-n can also use the social-networking serviceprovided by the social-network system 108 to communicate and collaboratewith each other.

In some embodiments, the network architecture 100 also includesthird-party servers 110-1, 110-2, . . . 110-m. In some embodiments, agiven third-party server 110 is used to host third-party websites thatprovide web pages to client devices 104, either directly or inconjunction with the social-network system 108. In some embodiments, thesocial-network system 108 uses inline frames (“iframes”) to nestindependent websites within a user's social network session. In someembodiments, a given third-party server is used to host third-partyapplications that are used by client devices 104, either directly or inconjunction with the social-network system 108. In some embodiments, thesocial-network system 108 uses iframes to enable third-party developersto create applications that are hosted separately by a third-partyserver 110, but operate within a social-networking session of a user 102and are accessed through the user's profile in the social-network system108. Exemplary third-party applications include applications for books,business, communication, contests, education, entertainment, fashion,finance, food and drink, games, health and fitness, lifestyle, localinformation, movies, television, music and audio, news, photos, video,productivity, reference material, security, shopping, sports, travel,utilities, and the like. In some embodiments, a given third-party server110 is used to host enterprise systems, which are used by client devices104, either directly or in conjunction with the social-network system108. In some embodiments, a given third-party server 110 is used toprovide third-party content, such as items of content (e.g., newsarticles, reviews, message feeds, etc.). Items of content may includeembedded content items (e.g., text, photos, videos, audio, and/or otherelectronic content with which a user may interact, such as interactivemaps, games, etc.).

In some embodiments, a given third-party server 110 is a singlecomputing device, while in other embodiments, a given third-party server110 is implemented by multiple computing devices working together toperform the actions of a server system (e.g., cloud computing).

FIG. 2 is a block diagram illustrating an exemplary social-networksystem 108 in accordance with some embodiments. The social-networksystem 108 typically includes one or more processing units (processorsor cores) 202, one or more network or other communications interfaces204, memory 206, and one or more communication buses 208 forinterconnecting these components. The communication buses 208 optionallyinclude circuitry (sometimes called a chipset) that interconnects andcontrols communications between system components. The social-networksystem 108 optionally includes a user interface (not shown). The userinterface, if provided, may include a display device and optionallyincludes inputs such as a keyboard, mouse, trackpad, and/or inputbuttons. Alternatively or in addition, the display device includes atouch-sensitive surface, in which case the display is a touch-sensitivedisplay.

Memory 206 includes high-speed random-access memory, such as DRAM, SRAM,DDR RAM, or other random-access solid-state memory devices; and mayinclude non-volatile memory, such as one or more magnetic disk storagedevices, optical disk storage devices, flash memory devices, and/orother non-volatile solid-state storage devices. Memory 206 mayoptionally include one or more storage devices remotely located from theprocessor(s) 202. Memory 206, or alternately the non-volatile memorydevice(s) within memory 206, includes a non-transitory computer-readablestorage medium. In some embodiments, memory 206 or the computer-readablestorage medium of memory 206 stores the following programs, modules anddata structures, or a subset or superset thereof:

-   -   an operating system 210 that includes procedures for handling        various basic system services and for performing hardware        dependent tasks;    -   a network communication module 212 that is used for connecting        the social-network system 108 to other computers via the one or        more communication network interfaces 204 (wired or wireless)        and one or more communication networks (e.g., the one or more        networks 106)    -   a social network database 214 for storing data associated with        the social network, such as:        -   entity information 216, such as user information 218;        -   connection information 220; and        -   content 222, such as user content 224 (e.g., items of            content with embedded content items, such as text, photos,            videos, audio, and/or other electronic content with which a            user may interact, such as interactive maps, games, etc.)            and/or news articles 226;    -   a social network server module 228 for providing        social-networking services and related features (e.g., in        conjunction with browser module 338 or social network client        module 340 on the client device 104, FIG. 3), which includes:        -   a login module 230 for logging a user 102 at a client 104            into the social-network system 108; and        -   a content feed manager 232 for providing content to be sent            to clients 104 for display, which includes:            -   a content generator module 234 for adding objects to the                social network database 214, such as images, videos,                audio files, comments, status messages, links,                applications, and/or other entity information 216,                connection information 220, or content 222; and            -   a content selector module 236 for choosing the                information/content to be sent to clients 104 for                display; and    -   a search module 238 for enabling users of the social-network        system to search for content and other users in the social        network.

The social network database 214 stores data associated with the socialnetwork in one or more types of databases, such as graph, dimensional,flat, hierarchical, network, object-oriented, relational, and/or XMLdatabases.

In some embodiments, the social network database 214 includes a graphdatabase, with entity information 216 represented as nodes in the graphdatabase and connection information 220 represented as edges in thegraph database. The graph database includes a plurality of nodes, aswell as a plurality of edges that define connections betweencorresponding nodes. In some embodiments, the nodes and/or edgesthemselves are data objects that include the identifiers, attributes,and information for their corresponding entities, some of which arerendered at clients 104 on corresponding profile pages or other pages inthe social-networking service. In some embodiments, the nodes alsoinclude pointers or references to other objects, data structures, orresources for use in rendering content in conjunction with the renderingof the pages corresponding to the respective nodes at clients 104.

Entity information 216 includes user information 218, such as userprofiles, login information, privacy and other preferences, biographicaldata, and the like. In some embodiments, for a given user, the userinformation 218 includes the user's name, profile picture, contactinformation, birth date, sex, marital status, family status, employment,education background, preferences, interests, and/or other demographicinformation.

In some embodiments, entity information 216 includes information about aphysical location (e.g., a restaurant, theater, landmark, city, state,or country), real or intellectual property (e.g., a sculpture, painting,movie, game, song, idea/concept, photograph, or written work), abusiness, a group of people, and/or a group of businesses. In someembodiments, entity information 216 includes information about aresource, such as an audio file, a video file, a digital photo, a textfile, a structured document (e.g., web page), or an application. In someembodiments, the resource is located in the social-network system 108(e.g., in content 222) or on an external server, such as third-partyserver 110.

In some embodiments, connection information 220 includes informationabout the relationships between entities in the social network database214. In some embodiments, connection information 220 includesinformation about edges that connect pairs of nodes in a graph database.In some embodiments, an edge connecting a pair of nodes represents arelationship between the pair of nodes.

In some embodiments, an edge includes or represents one or more dataobjects or attributes that correspond to the relationship between a pairof nodes. For example, when a first user indicates that a second user isa “friend” of the first user, the social-network system 108 transmits a“friend request” to the second user. If the second user confirms the“friend request,” the social-network system 108 creates and stores anedge connecting the first user's user node and the second user's usernode in a graph database as connection information 220 that indicatesthat the first user and the second user are friends. In someembodiments, connection information 220 represents a friendship, afamily relationship, a business or employment relationship, a fanrelationship, a follower relationship, a visitor relationship, asubscriber relationship, a superior/subordinate relationship, areciprocal relationship, a non-reciprocal relationship, another suitabletype of relationship, or two or more such relationships.

In some embodiments, an edge between a user node and another entity noderepresents connection information about a particular action or activityperformed by a user of the user node towards the other entity node. Forexample, a user may “like” or have “attended,” “played,” “listened,”“cooked,” “worked at,” or “watched” the entity at the other node. Thepage in the social-networking service that corresponds to the entity atthe other node may include, for example, a selectable “like,” “checkin,” or “add to favorites” icon. After the user clicks one of theseicons, the social-network system 108 may create a “like” edge, “checkin” edge, or a “favorites” edge in response to the corresponding useraction. As another example, the user may listen to a particular songusing a particular application (e.g., an online music application). Inthis case, the social-network system 108 may create a “listened” edgeand a “used” edge between the user node that corresponds to the user andthe entity nodes that correspond to the song and the application,respectively, to indicate that the user listened to the song and usedthe application. In addition, the social-network system 108 may create a“played” edge between the entity nodes that correspond to the song andthe application to indicate that the particular song was played by theparticular application.

In some embodiments, content 222 includes text (e.g., ASCII, SGML,HTML), images (e.g., jpeg, tif and gif), graphics (e.g., vector-based orbitmap), audio, video (e.g., mpeg), other multimedia, and/orcombinations thereof. In some embodiments, content 222 includesexecutable code (e.g., games executable within a browser window orframe), podcasts, links, and the like.

In some embodiments, the social network server module 228 includes webor Hypertext Transfer Protocol (HTTP) servers, File Transfer Protocol(FTP) servers, as well as web pages and applications implemented usingCommon Gateway Interface (CGI) script, PHP Hyper-text Preprocessor(PHP), Active Server Pages (ASP), Hyper Text Markup Language (HTML),Extensible Markup Language (XML), Java, JavaScript, AsynchronousJavaScript and XML (AJAX), XHP, Javelin, Wireless Universal ResourceFile (WURFL), and the like.

FIG. 3 is a block diagram illustrating an exemplary client device 104 inaccordance with some embodiments. The client device 104 typicallyincludes one or more processing units (processors or cores) 302, one ormore network or other communications interfaces 304, memory 306, and oneor more communication buses 308 for interconnecting these components.The communication buses 308 optionally include circuitry (sometimescalled a chipset) that interconnects and controls communications betweensystem components. The client device 104 includes a user interface 310.The user interface 310 typically includes a display device 312. In someembodiments, the client device 104 includes inputs such as a keyboard,mouse, and/or other input buttons 316. Alternatively or in addition, insome embodiments, the display device 312 includes a touch-sensitivesurface 314, in which case the display device 312 is a touch-sensitivedisplay. In some embodiments, the touch-sensitive surface 314 isconfigured to detect various swipe gestures (e.g., in vertical and/orhorizontal directions) and/or other gestures (e.g., single/double tap).In client devices that have a touch-sensitive display 312, a physicalkeyboard is optional (e.g., a soft keyboard may be displayed whenkeyboard entry is needed). The user interface 310 also includes an audiooutput device 318, such as speakers or an audio output connectionconnected to speakers, earphones, or headphones. Furthermore, someclient devices 104 use a microphone and voice recognition to supplementor replace the keyboard. Optionally, the client device 104 includes anaudio input device 320 (e.g., a microphone) to capture audio (e.g.,speech from a user). Optionally, the client device 104 includes alocation detection device 322, such as a GPS (global positioningsatellite) or other geo-location receiver, for determining the locationof the client device 104. The client device 104 also optionally includesan image/video capture device 324, such as a camera or webcam.

In some embodiments, the client device 104 includes one or more optionalsensors 323 (e.g., gyroscope, accelerometer) for detecting a motionand/or change in orientation of the client device. In some embodiments,a detected motion and/or orientation of the client device 104 (e.g., themotion/change in orientation corresponding to a user input produced by auser of the client device) is used to manipulate an interface (orcontent items within the interface) displayed on the client device 104(e.g., viewing different portions of a displayed embedded content item,as shown in FIGS. 4D and 4E).

Memory 306 includes high-speed random-access memory, such as DRAM, SRAM,DDR RAM or other random-access solid-state memory devices; and mayinclude non-volatile memory, such as one or more magnetic disk storagedevices, optical disk storage devices, flash memory devices, or othernon-volatile solid-state storage devices. Memory 306 may optionallyinclude one or more storage devices remotely located from theprocessor(s) 302. Memory 306, or alternately the non-volatile memorydevice(s) within memory 306, includes a non-transitory computer-readablestorage medium. In some embodiments, memory 306 or the computer-readablestorage medium of memory 306 stores the following programs, modules anddata structures, or a subset or superset thereof:

-   -   an operating system 326 that includes procedures for handling        various basic system services and for performing hardware        dependent tasks;    -   a network communication module 328 that is used for connecting        the client device 104 to other computers via the one or more        communication network interfaces 304 (wired or wireless) and one        or more communication networks, such as the Internet, cellular        telephone networks, mobile data networks, other wide area        networks, local area networks, metropolitan area networks, and        so on;    -   an image/video capture module 330 (e.g., a camera module) for        processing a respective image or video captured by the        image/video capture device 324, where the respective image or        video may be sent or streamed (e.g., by a client application        module 336) to the social-network system 108;    -   an audio input module 332 (e.g., a microphone module) for        processing audio captured by the audio input device 320, where        the respective audio may be sent or streamed (e.g., by a client        application module 336) to the social-network system 108;    -   a location detection module 334 (e.g., a GPS, Wi-Fi, or hybrid        positioning module) for determining the location of the client        device 104 (e.g., using the location detection device 322) and        providing this location information for use in various        applications (e.g., social network client module 340); and    -   one or more client application modules 336, including the        following modules (or sets of instructions), or a subset or        superset thereof:        -   a web browser module 338 (e.g., Internet Explorer by            Microsoft, Firefox by Mozilla, Safari by Apple, or Chrome by            Google) for accessing, viewing, and interacting with web            sites (e.g., a social-networking web site provided by the            social-network system 108 and/or web sites that are linked            to in a social network module 340 and/or an optional client            application module 342), such as a web site hosting a            service for displaying and accessing items of content (e.g.,            news articles) with embedded content items (e.g., text,            photos, videos, audio, and/or other electronic content with            which a user may interact)        -   a social network module 340 for providing an interface to a            social-networking service (e.g., a social-networking service            provided by social-network system 108) and related features,            such as an interface to a service for displaying and            accessing items of content (e.g., news articles) with            embedded content items (e.g., text, photos, videos, audio,            and/or other electronic content with which a user may            interact); and/or        -   optional client application modules 342, such as            applications for displaying and accessing items of content            (e.g., news articles) with embedded content items (e.g.,            text, photos, videos, audio, and/or other electronic content            with which a user may interact), word processing,            calendaring, mapping, weather, stocks, time keeping, virtual            digital assistant, presenting, number crunching            (spreadsheets), drawing, instant messaging, e mail,            telephony, video conferencing, photo management, video            management, a digital music player, a digital video player,            2D gaming, 3D (e.g., virtual reality) gaming, electronic            book reader, and/or workout support.

Each of the above identified modules and applications correspond to aset of executable instructions for performing one or more functions asdescribed above and/or in the methods described in this application(e.g., the computer-implemented methods and other information processingmethods described herein). These modules (i.e., sets of instructions)need not be implemented as separate software programs, procedures ormodules, and thus various subsets of these modules are, optionally,combined or otherwise re-arranged in various embodiments. In someembodiments, memory 206 and/or 306 store a subset of the modules anddata structures identified above. Furthermore, memory 206 and/or 306optionally store additional modules and data structures not describedabove.

Attention is now directed towards embodiments of graphical userinterfaces (“GUIs”) and associated processes that may be implemented ona client device (e.g., the client device 104 in FIG. 3).

FIGS. 4A-4G illustrate exemplary GUIs on a client device 104 for viewingitems of content that include content items (e.g., pictures, graphics,etc.) embedded within them, in accordance with some embodiments. TheGUIs in these figures are displayed in response to detected user inputs,starting from the displayed item of content 400 (FIG. 4A), and are usedto illustrate the processes described below, including the method 500(FIGS. 5A-5C). The GUIs may be provided by a web browser (e.g., webbrowser module 338, FIG. 3), an application for a social-networkingservice (e.g., social network module 340), and/or a third-partyapplication (e.g., client application module 342). While FIGS. 4A-4Gillustrate examples of GUIs, in other embodiments, a GUI displaysuser-interface elements in arrangements distinct from the embodiments ofFIGS. 4A-4G.

FIGS. 4A and 4B illustrate a GUI for an item of content 400 and embeddedcontent item 402. Items of content include various types of formattedcontent (e.g., web content, such as HTML-formatted documents, ordocuments in other proprietary web formats), including but not limitedto news articles, web pages, blogs, user content published via asocial-networking service, and/or other types of published content.Items of content may include various types of embedded content itemspresentable to a user and with which a user may interact. Examples ofembedded content items include text, digital media (e.g., photos,videos, audio), and/or other electronic content with which a user mayinteract (e.g., interactive maps, games, etc.). In FIGS. 4A and 4B, theitem of content 400 is a news article (titled “Sea Turtle Egg HatchingsHit Record High”) that includes embedded content item 402 (a picture).

Swipe gesture 404-1 in FIG. 4A corresponds to a vertical scroll forviewing and browsing the item of content 400, where the resulting viewin FIG. 4B allows the embedded content item 402 to be shown in itsentirety.

In FIG. 4B, detecting a gesture 406 (e.g., a tap) on the embeddedcontent item 402 results in displaying the embedded content item at alarger resolution (FIG. 4C) than the resolution at which the embeddedcontent item is displayed in FIG. 4B. Only a portion 402-1 of theembedded content item is shown in FIG. 4C, because the entire embeddedcontent item 402 does not fit with the display area at the largerresolution. While displaying the embedded content item 402 at the largerresolution, detecting tilt gesture 408-1 (shown in FIG. 4D for across-sectional view of the client device 104-1) results in displaying adifferent portion 402-2 of the embedded content item, while detectingtilt gesture 408-2 (FIG. 4E) results in displaying yet another portion402-3 of the embedded content item.

In FIG. 4F, detecting a swipe gesture 404-2 (while displaying theembedded content item 402 at the larger resolution) reverts back todisplaying the embedded content item 402 at the initial resolution (FIG.4B), as shown in FIG. 4G.

The GUIs shown in FIGS. 4A-4G are described in greater detail below inconjunction with the method 500 of FIGS. 5A-5C.

FIGS. 5A-5C are flow diagrams illustrating the method 500 of viewingembedded content, in accordance with some embodiments. The method 500 isperformed on an electronic device (e.g., client device 104, FIGS. 1 and3). FIGS. 5A-5C correspond to instructions stored in a computer memory(e.g., memory 306 of the client device 104, FIG. 3) or othercomputer-readable storage medium. To assist with describing the method500, FIGS. 5A-5C will be described with reference to the exemplary GUIsillustrated in FIGS. 4A-4G.

In the method 500, the electronic device simultaneously displays (502),within an item of content, an embedded content item and a first portionof the item of content distinct from the embedded content item. Theembedded content item and a first portion are displayed together in adisplay area having a display height and a display width. The embeddedcontent item is displayed at a first resolution at which the entirewidth of the embedded content item is contained within the display widthof the display area. As shown in the example of FIG. 4A, the embeddedcontent item 402 is displayed at a resolution at which the entire widthof the embedded content item 402 is contained within the display width.In some embodiments, the embedded content item is displayed at aresolution at which the entire height of the embedded content item iscontained within the display height of the display area (e.g., theembedded content item 402 as shown in FIG. 4B).

As described above, items of content include various types of formattedcontent, which may include different types of embedded content itemspresentable to a user and with which a user may interact. In someembodiments, the item of content includes (504) text, and the embeddedcontent item includes a picture or graphic. In FIG. 4A, for example, theitem of content 400 is a news article, a portion of which issimultaneously displayed with the embedded content item 402, which is anassociated picture. Other examples of items of content include but arenot limited to web pages, blogs, user content published via asocial-networking service, and/or other types of published content.Other examples of embedded content items include text, other types ofdigital media (e.g., videos), and/or other electronic content with whicha user may interact (e.g., interactive maps, games, etc.).

In some embodiments, the electronic device includes (506) a displaydevice (e.g., display 312, FIGS. 3 and 4A) having a screen area. Thedisplay area occupies (i.e., is coextensive with) the screen area of thedisplay device. Referring to FIG. 4B, for example, a portion of the itemof content 400 and the embedded content item 402 are simultaneouslydisplayed in a display area, where the display area occupies the screenarea of the display 312. In some embodiments, the display area occupiesless than the screen area of the display device (e.g., the GUIdisplaying the item of content and embedded content item is a window ortile that occupies only a fraction of the screen area).

In some embodiments, the first portion of the item of content includes(508) a first sub-portion above the embedded content item as displayedat the first resolution, and a second sub-portion below the embeddedcontent item as displayed at the first resolution (e.g., FIG. 4B, wheresub-portions of the item of content 400 are shown above and below theembedded content item 402).

In some embodiments, the width of the embedded content item beingdisplayed at the first resolution equals (510) the display width of thedisplay area (e.g., equals the screen width, window width, or tilewidth). In some embodiments, the width of the embedded content itembeing displayed at the first resolution is less than the display width(e.g., embedded content item 402 as shown in FIG. 4B).

In some embodiments, simultaneously displaying (502) the embeddedcontent item and the first portion of the item of content includes (512)displaying a first portion, a second portion, and a third portion of theembedded content item, wherein the first portion, the second portion,and the third portion of the embedded content item are distinct (e.g.,and together compose the entire embedded content item). Displaying theembedded content item 402 in FIG. 4B, for example, may be viewed asdisplaying three distinct portions of the embedded content item 402: afirst portion 402-1 (FIG. 4C), a second portion 402-2 (FIG. 4D), and athird portion (FIG. 4E). The first, second, and third portions of theembedded content item may be partially distinct (i.e., some portionsoverlap with other portions, such as portions 402-1 through 402-3, FIG.4E) or entirely distinct (i.e., no two portions overlap).

A first user input indicating selection of the embedded content item isdetected (514). In some embodiments, the first user input is a touchgesture (e.g., tap) detected on the embedded content item (e.g., gesture406, FIG. 4B).

Referring now to FIG. 5B, in response to detecting (516) the first userinput, the electronic device ceases (518) display of the first portionof the item of content, and displays (524) the first portion of theembedded content item at a second resolution that is greater than thefirst resolution. In some embodiments, the height of the first portionof the embedded content item at the second resolution equals the displayheight. An example is shown in FIGS. 4B and 4C, where the gesture 406 isdetected on the embedded content item 402 (FIG. 4B). In response, theclient device 104-1 ceases display of the item of content 400, and afirst portion of the embedded content item 402-1 is displayed (FIG. 4C)at a larger resolution than the displayed embedded content item 402(FIG. 4B), such that the embedded content item is effectively shown in azoomed view.

In some embodiments, ceasing (518) display of the first portion of theitem of content includes (520) decreasing an amount of the first portionof the item of content being displayed until the first portion of theitem of content is no longer displayed. Decreasing the amount of thefirst portion of the item of content being displayed may includedisplaying various visual effects. For example, when transitioning fromthe GUI of FIG. 4B to the GUI of FIG. 4C in response to detecting thefirst user input, the displayed portions of the item of content 400(FIG. 4B) outside of the embedded content item may appear as if they arebeing gradually shrunk while the resolution of the embedded content item402 proportionally increases. Alternatively, the displayed portions mayappear as if being visually pushed off the visible boundaries of thedisplay area (i.e., off the edges of the display 312). In yet anotherembodiment, the displayed portions appear stationary, as the displayedembedded content item 402 visually expands to the second resolution and“covers” the displayed portions (i.e., the displayed portions areeffectively “beneath” or “behind” the embedded content item 402).

In some embodiments, before displaying (524) the first portion of theembedded content item at the second resolution, the resolution of thefirst portion of the embedded content item being displayed is increased(522) until the first portion of the embedded content item is displayedat the second resolution. The resolution of the first portion of theembedded content item is increased while decreasing the amount of thefirst portion of the item of content being displayed, and whiledecreasing a percentage of the embedded content item being displayed.For example, the first portion of the embedded content item 402-1displayed in FIG. 4C represents a smaller percentage of the embeddedcontent item 402 than the entire embedded content item 402 displayed inFIG. 4B.

In some embodiments, displaying (524) the first portion of the embeddedcontent item at the second resolution includes (526) ceasing display ofthe second portion of the embedded content item and the third portion ofthe embedded content item. For example, in FIG. 4C, when displaying thefirst portion of the embedded content item 402-1, the adjacent portions(a second portion to the left and a third portion to the right of thefirst portion 402-1, as illustrated in FIG. 4C) are no longer displayed.

In some embodiments, a user input is detected (528) in a firstdirection. For example, the user input includes a rotational tilt (530)of the electronic device in the first direction. The rotational tilt mayinclude a turning of the electronic device in a direction (e.g.,clockwise or counter-clockwise) with respect to an axis (e.g., an axisthat bisects the display) (e.g., axes of a horizontal plane). Forexample, FIGS. 4C-4E illustrate views of the client device 104-1 fromthe bottom of the device seen at eye level (i.e., cross-sectionalviews). With reference to the orientation of the client device 104-1 inFIG. 4C (no tilt, parallel to horizontal plane), the tilt gesture 408-1(FIG. 4D) is a rotational tilt in a counter-clockwise direction.

In response to detecting (528) the user input in the first direction,the electronic devices ceases (532) display of at least a part of thefirst portion of the embedded content item and displays at least a partof the second portion of the embedded content item. FIGS. 4C and 4Dillustrate an example. In response to detecting the tilt gesture 408-1(FIG. 4D), the client device 104-1 transitions from displaying the firstportion of the embedded content item 402-1 (FIG. 4C) to displaying thesecond portion of the embedded content item 402-2 (FIG. 4D). As shown inFIG. 4D, the second portion of the embedded content item 402-2 includespart of the first portion 402-1 (shown in FIG. 4C), while the remainingpart of the first portion 402-1 is no longer displayed. The user inputin the first direction (e.g., tilt gesture 408-1, FIG. 4D) thereforeallows a user to manipulate and interact with a displayed view of theembedded content item. In this example, the user is able to viewportions of a picture that are not within the display area in operation524 (i.e., portions that are no longer visible after enlarging theresolution of the embedded content item 400).

In some embodiments, ceasing (532) display of at least a part of thefirst portion of the embedded content item and displaying at least apart of the second portion of the embedded content item includes (534)decreasing an amount of the first portion of the embedded content itembeing displayed. Furthermore, while decreasing (534) the amount of thefirst portion of the embedded content item being displayed, an amount ofthe second portion of the embedded content item being displayed isincreased (536). For example, in response to detecting the tilt gesture408-1 in FIG. 4D (i.e., transitioning from the GUI of FIG. 4C to 4D),the amount of the first portion of the embedded content item 402-1 beingdisplayed is decreased, while the amount of the second portion of theembedded content item 402-1 being displayed is increased. Translationwithin the embedded content item from the first portion to the secondportion thus is achieved in accordance with some embodiments.

Referring now to FIG. 5C, in some embodiments, a user input is detected(538) in a second direction opposite to the first direction (in 528). Insome embodiments, the user input includes (540) a rotational tilt of theelectronic device in the second direction. For example, a tilt gesture408-2 is detected in FIG. 4E, which is a rotational tilt in a clockwisedirection (opposite to the direction of the tilt gesture 408-1, FIG.4D). In response to detecting (538) the user input in the seconddirection, the electronic devices ceases (542) display of at least thepart of the second portion of the embedded content item and displays atleast a part of the third portion of the embedded content item. (Ifoperations 528 and 532 are omitted from the method 500, then display ofat least part of the first portion of the embedded content item ceasesand at least a part of the third portion of the embedded content item isdisplayed.) In FIG. 4E, for example, in response to detecting a tiltgesture 408-2, the client device 104-1 transitions from displaying thesecond portion of the embedded content item 402-2 (FIG. 4D) todisplaying the third portion of the embedded content item 402-3 (FIG.4E). In the example of FIG. 4E, the third portion of the embeddedcontent item 402-3 includes part of the first portion 402-1 (shown inFIG. 4C). Alternatively, the first and third portions do not overlap.Thus, in some embodiments, the part of the first portion of the embeddedcontent item that is no longer displayed while displaying the secondportion of the embedded content item is displayed while displaying thethird portion of the embedded content item.

In some embodiments, the height of the embedded content item at thesecond resolution would exceed the display height of the display area.Thus, in some embodiments, the electronic device ceases displayingportions above and/or below the first portion (e.g., top and/or bottomportions of the embedded content item), along with a second portion(e.g., adjacent and to the left of the first portion) and a thirdportion (e.g., adjacent and to the right of the first portion) of theembedded content item. In these embodiments, in response to detecting auser input in a first direction (e.g., clockwise), at least part of thesecond portion of the embedded content item is displayed, and inresponse to detecting a user input in a second direction opposite to thefirst direction (e.g., counter-clockwise), at least part of the thirdportion of the embedded content item is displayed. In some embodiments,in response to detecting a user input in a third direction distinct fromthe first and second direction (e.g., substantially perpendicular to thefirst and second directions), the electronic device displays at leastsome of the top or bottom portion that ceased being displayed.Continuing the example above, if a tilt gesture is detected with respectto an axis distinct from (e.g., substantially perpendicular to) thefirst and second directions (e.g., with reference to the display asviewed by a user holding a device, a side-to-side axis, rather than atop-to-bottom axis), a top or bottom portion of the embedded contentitem is displayed.

In some embodiments, the amount of a respective portion of the embeddedcontent item being displayed in response to detecting a user input(e.g., a rotational tilt) is proportional to the magnitude of the userinput. The magnitude of a rotational tilt, for example, corresponds tothe angle of the rotational tilt with respect to a predefined axis(e.g., longitudinal/latitudinal axes of a planar surface of the clientdevice 104-1, such as axes that bisect the display). As an example,referring to FIG. 4D, the amount of the second portion 402-2 displayedin response to detecting the tilt gesture 408-1 that forms a first angle(e.g., a 15 degree angle) with the horizontal axis, is less than anamount of the second portion 402-2 that would displayed in response todetecting a tilt gesture in the same direction that forms a second,larger angle (e.g., a 45 degree angle).

In some embodiments, the direction of the rotational tilt is withreference to one or more axes of a predefined plane (e.g., the plane ofthe display at the time the first user input is detected, but notsubstantially perpendicular to a plane defined by the direction ofgravity). Axes based on a predefined plane may therefore allow a user tomore naturally view or interact with embedded content without requiringthe user to adjust his viewing angle or orient the client device toconform to arbitrarily defined axes.

In some embodiments, while displaying a portion of the embedded contentitem at the second resolution, a user input is detected (544). In someembodiments, the user input is (546) a swipe gesture (e.g., asubstantially vertical swipe). Additionally and/or alternatively, theuser input may be a tap gesture (e.g., single tap). In response todetecting (544) the user input, the electronic device transitions (548)from display of the first portion of the embedded content item at thesecond resolution, to simultaneous display of the embedded content itemand a respective portion of the item of content. For example, a swipegesture 404-2 (FIG. 4F) in a substantially vertical direction isdetected while displaying the first portion of the embedded content item402-1. In response, the entire embedded content item 402 and a portionof the item of content 400 are simultaneously displayed.

In some embodiments, the respective portion of the item of content (548)is the first portion of the item of content (550). In other words, theelectronic device reverts back to displaying the portion of the item ofcontent at the resolution displayed prior to displaying the embeddedcontent item at the second resolution. In other embodiments, therespective portion of the item of content (548) is a second portion ofthe item of content (552) distinct from the first portion of the item ofcontent (e.g., more text is displayed below the embedded content item402 in FIG. 4G than in FIG. 4B). In another example, in response to theswipe gesture 404-2 (FIG. 4F), the electronic device may smoothlytransition back to displaying the embedded content item 402 at the priorresolution (i.e., gradually decrease the displayed resolution of theembedded content item 402 from the second resolution to the firstresolution). Until the displayed embedded content item 402 returns tothe first resolution, the portion of the item of content 400 beingdisplayed is therefore different from the first portion displayed inFIG. 4B.

For situations in which the systems discussed above collect informationabout users, the users may be provided with an opportunity to opt in/outof programs or features that may collect personal information (e.g.,information about a user's preferences or a user's contributions tosocial content providers). In addition, in some embodiments, certaindata may be anonymized in one or more ways before it is stored or used,so that personally identifiable information is removed. For example, auser's identity may be anonymized so that the personally identifiableinformation cannot be determined for or associated with the user, and sothat user preferences or user interactions are generalized (for example,generalized based on user demographics) rather than associated with aparticular user.

Although some of various drawings illustrate a number of logical stagesin a particular order, stages which are not order dependent may bereordered and other stages may be combined or broken out. While somereordering or other groupings are specifically mentioned, others will beapparent to those of ordinary skill in the art, so the ordering andgroupings presented herein are not an exhaustive list of alternatives.Moreover, it should be recognized that the stages could be implementedin hardware, firmware, software or any combination thereof.

The foregoing description, for purpose of explanation, has beendescribed with reference to specific embodiments. However, theillustrative discussions above are not intended to be exhaustive or tolimit the scope of the claims to the precise forms disclosed. Manymodifications and variations are possible in view of the aboveteachings. The embodiments were chosen in order to best explain theprinciples underlying the claims and their practical applications, tothereby enable others skilled in the art to best use the embodimentswith various modifications as are suited to the particular usescontemplated.

What is claimed is:
 1. A method, performed by an electronic devicehaving a display, the method comprising: displaying, in a display area,a first portion of a content item, the first portion of the content itemconsisting of: (i) embedded content having opposing first and secondsides, displayed at a first resolution, and (ii) a first text portiondisplayed adjacent to the first side of the embedded content; detectinga touch gesture indicating selection of the embedded content; inresponse to the touch gesture indicating selection of the embeddedcontent, displaying the embedded content, in the display area, at asecond resolution that is greater than the first resolution; whiledisplaying the embedded content at the second resolution, detecting aswipe gesture in a first direction; and in response to the swipe gesturein the first direction: displaying, in the display area, a secondportion of the content item, the second portion of the content itemconsisting of: (i) the embedded content, displayed at the firstresolution, and (ii) a second text portion displayed adjacent to thesecond side of the embedded content, wherein the second text portion isnot included in the first portion of the content item.
 2. The method ofclaim 1, further comprising: in response to the touch gesture indicatingselection of the embedded content, ceasing display of the first textportion in the display area.
 3. The method of claim 2, wherein ceasingdisplay of the first text portion comprises decreasing an amount of thefirst text portion being displayed until the first text portion is nolonger displayed.
 4. The method of claim 1, wherein displaying theembedded content at the second resolution comprises displaying a firstsegment of the embedded content at the second resolution, wherein aheight of the first segment at the second resolution equals a displayheight of the display area.
 5. The method of claim 4, wherein:displaying the first portion of the content item comprises displaying aplurality of segments of the embedded content, including the firstsegment, wherein the plurality of segments of the embedded content aredistinct segments; and displaying the first segment of the embeddedcontent at the second resolution comprises ceasing display of the othersegments in the plurality of segments.
 6. The method of claim 4, furthercomprising, while displaying the first segment of the embedded contentat the second resolution and before detecting the swipe gesture:detecting a tilt gesture in a first direction; and in response to thetilt gesture, ceasing display of at least a part of the first segment ofthe embedded content and displaying at least a part of a second segmentfrom the plurality of segments.
 7. The method of claim 6, furthercomprising, before detecting the swipe gesture: after detecting the tiltgesture, detecting another tilt gesture in a second direction oppositeto the first direction; and in response to the other tilt gesture,ceasing display of at least the part of the second segment of theembedded content and displaying at least a part of a third segment fromthe plurality of segments.
 8. The method of claim 7, wherein ceasingdisplay of at least the part of the first segment of the embeddedcontent and displaying at least the part of the second segment of theembedded content comprises: decreasing an amount of the first segment ofthe embedded content being displayed; and while decreasing the amount ofthe first segment of the embedded content being displayed, increasing anamount of the second segment of the embedded content being displayed. 9.The method of claim 1, wherein the embedded content includes a picture,graphic, audio, or video.
 10. An electronic device, comprising: adisplay; one or more hardware processors; and memory storing one or moreprograms configured for execution by the one or more hardwareprocessors, the one or more programs including instructions for:displaying, in a display area, a first portion of a content item, thefirst portion of the content item consisting of: (i) embedded contenthaving opposing first and second sides, displayed at a first resolution,and (ii) a first text portion displayed adjacent to the first side ofthe embedded content; detecting a touch gesture indicating selection ofthe embedded content; in response to the touch gesture indicatingselection of the embedded content, displaying the embedded content, inthe display area, at a second resolution that is greater than the firstresolution; while displaying the embedded content at the secondresolution, detecting a swipe gesture in a first direction; and inresponse to the swipe gesture in the first direction: displaying, in thedisplay area, a second portion of the content item, the second portionof the content item consisting of: (i) the embedded content, displayedat the first resolution, and (ii) a second text portion displayedadjacent to the second side of the embedded content, wherein the secondtext portion is not included in the first portion of the content item.11. The electronic device of claim 10, wherein the one or more programsfurther include instructions for ceasing display of the first textportion in the display area, in response to the touch gesture indicatingselection of the embedded content.
 12. The electronic device of claim11, wherein ceasing display of the first text portion comprisesdecreasing an amount of the first text portion being displayed until thefirst text portion is no longer displayed.
 13. The electronic device ofclaim 10, wherein: displaying the embedded content at the secondresolution comprises displaying a first segment of the embedded contentat the second resolution; and a height of the first segment of theembedded content at the second resolution equals a display height of thedisplay area.
 14. The electronic device of claim 13, wherein: displayingthe first portion of the content item comprises displaying a pluralityof segments of the embedded content, including the first segment, wherethe plurality of segments of the embedded content are distinct segments;and displaying the first segment of the embedded content at the secondresolution comprises ceasing display of the other segments in theplurality of segments.
 15. The electronic device of claim 13, whereinthe one or more programs further include instructions for, whiledisplaying the first segment of the embedded content at the secondresolution and before detecting the swipe gesture: detecting a tiltgesture in a first direction; and in response to the tilt gesture,ceasing display of at least a part of the first segment of the embeddedcontent and displaying at least a part of a second segment from theplurality of segments.
 16. The electronic device of claim 13, whereinthe one or more programs further include instructions for, beforedetecting the swipe gesture: after detecting the tilt gesture, detectinganother tilt gesture in a second direction opposite to the firstdirection; and in response to the other tilt gesture, ceasing display ofat least the part of the second segment of the embedded content anddisplaying at least a part of a third segment from the plurality ofsegments.
 17. The electronic device of claim 16, wherein ceasing displayof at least the part of the first segment of the embedded content anddisplaying at least the part of the second segment of the embeddedcontent comprises: decreasing an amount of the first segment of theembedded content being displayed; and while decreasing the amount of thefirst segment of the embedded content being displayed, increasing anamount of the second segment of the embedded content being displayed.18. The electronic device of claim 10, wherein the embedded contentincludes a picture, graphic, audio, or video.
 19. A non-transitorycomputer-readable storage medium storing one or more programs configuredfor execution by one or more hardware processors of an electronicdevice, the one or more programs including instructions for: displaying,in a display area, a first portion of a content item, the first portionof the content item consisting of: (i) embedded content having opposingfirst and second sides, displayed at a first resolution, and (ii) afirst text portion displayed adjacent to the first side of the embeddedcontent; detecting a touch gesture indicating selection of the embeddedcontent; in response to the touch gesture indicating selection of theembedded content, displaying the embedded content, in the display area,at a second resolution that is greater than the first resolution; whiledisplaying the embedded content at the second resolution, detecting aswipe gesture in a first direction; and in response to the swipe gesturein the first direction: displaying, in the display area, a secondportion of the content item, the second portion of the content itemconsisting of: (i) the embedded content, displayed at the firstresolution, and (ii) a second text portion displayed adjacent to thesecond side of the embedded content, wherein the second text portion isnot included in the first portion of the content item.
 20. Thecomputer-readable storage medium of claim 19, wherein the one or moreprograms further comprise instructions for: in response to the touchgesture indicating selection of the embedded content, ceasing display ofthe first text portion in the display area.